import {BasicColumn} from '/@/components/Table';
import {FormSchema} from '/@/components/Table';
import {h} from 'vue';
import {Switch} from 'ant-design-vue';
import {setRoleStatus} from '/@/api/system/role';
import {useMessage} from '/@/hooks/web/useMessage';
import {usePermission} from '/@/hooks/web/usePermission';
import moment from "moment";

export const columns: BasicColumn[] = [
    {
        title: '角色ID',
        dataIndex: 'roleValue',
        width: 60,
    },
    {
        title: '角色名称',
        dataIndex: 'roleName',
        width: 200,
    },
    {
        title: '排序',
        dataIndex: 'orderNo',
        width: 60,
    },
    {
        title: '状态',
        dataIndex: 'status',
        width: 120,
        customRender: ({record}) => {
            if (!Reflect.has(record, 'pendingStatus')) {
                record.pendingStatus = false;
            }
            return h(Switch, {
                checked: record.status === true,
                checkedChildren: '已启用',
                unCheckedChildren: '已禁用',
                loading: record.pendingStatus,
                onChange(checked: boolean) {
                    record.pendingStatus = true;
                    const newStatus = checked;
                    const {createMessage} = useMessage();
                    setRoleStatus(record.id, newStatus)
                        .then(() => {
                            record.status = newStatus;
                            createMessage.success(`已成功修改角色状态`);
                        })
                        .catch(() => {
                            createMessage.error('修改角色状态失败');
                        })
                        .finally(() => {
                            record.pendingStatus = false;
                        });
                },
            });
        },
        ifShow: () => {
            const {hasPermission} = usePermission();
            return hasPermission(['role_status'])
        },
    },
    {
        title: '创建时间',
        dataIndex: 'createTime',
        width: 180,
        format: (text: string) => moment(text).format('YYYY-MM-DD HH:mm:ss'),
    },
    {
        title: '备注',
        dataIndex: 'remark',
    },
];

export const searchFormSchema: FormSchema[] = [
    {
        field: 'roleName',
        label: '角色名称',
        component: 'Input',
        colProps: {span: 8},
        componentProps: {
            placeholder: '请输入，支持模糊匹配'
        }
    },
    {
        field: 'status',
        label: '状态',
        component: 'Select',
        componentProps: {
            options: [
                {label: '启用', value: true},
                {label: '停用', value: false},
            ],
        },
        colProps: {span: 8},
    },
    {
        field: 'remark',
        label: '角色备注',
        component: 'Input',
        colProps: {span: 8},
        componentProps: {
            placeholder: '请输入，支持模糊匹配'
        }
    },
    {
        field: 'createTime',
        label: '创建时间',
        component: 'RangePicker',
        colProps: {xl: 8, lg: 12},
        componentProps: {
            allowClear: true,
            showTime: true
        }
    },
];

export const formSchema: FormSchema[] = [
    {
        field: 'id',
        label: '角色Id',
        component: 'Input',
        show: false
    },
    {
        field: 'roleName',
        label: '角色名称',
        required: true,
        component: 'Input',
    },
    {
        field: 'orderNo',
        label: '排序',
        component: 'InputNumber',
        colProps: {span: 18},
        componentProps: {
            defaultValue: 99
        }
    },
    {
        field: 'status',
        label: '状态',
        component: 'RadioButtonGroup',
        defaultValue: true,
        componentProps: {
            options: [
                {label: '启用', value: true},
                {label: '停用', value: false},
            ],
        },
    },
    {
        label: '备注',
        field: 'remark',
        component: 'InputTextArea',
    },
    {
        label: ' ',
        field: 'menu',
        slot: 'menu',
        component: 'Input',
    },
];
